<template>
  <div>
    <div id="container"></div>
    <div class="box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[3, 4, 5, 6]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="blogNum.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
declare const echarts: any;
import { Component, Vue } from "vue-property-decorator";
type blognum = {
  goodNum: number;
  seeNum: number;
  title: string;
  commentLength: number;
};
@Component
export default class chat extends Vue {
  private blogNum: Array<Array<number | string>> = [];
  private myChart: any = {};
  private option: object = {};
  private currentPage3: number = 5;
  private pageNum: number = 1; //当前页
  private pageSize: number = 3; //每页数量
  private realBlogNum: Array<Array<number | string>> = [];
  created() {}
  mounted() {
    var dom = document.getElementById("container");
    this.myChart = echarts.init(dom);
    this.getNumList().then(() => {
      this.drawChart();
    });
  }
  handleSizeChange(val: number) {
    this.pageSize = val;
    this.controlLimit();
    this.drawChart();
  }
  drawChart(): void {
    let option = {
      legend: {},
      tooltip: {},
      dataset: {
        source: this.realBlogNum,
      },
      xAxis: { type: "category" },
      yAxis: {},
      series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
    };
    this.myChart.setOption(option, true);
  }
  handleCurrentChange(val: number) {
    this.pageNum = val;
    this.controlLimit();
    this.drawChart();
    console.log(this.realBlogNum);
  }
  controlLimit() {
    this.realBlogNum = this.blogNum.filter(
      (item: Array<string | number>, index: number): boolean => {
        return (
          index >= (this.pageNum - 1) * this.pageSize &&
          index < this.pageNum * this.pageSize
        );
      }
    );
    this.realBlogNum.unshift(["product", "观看数", "点赞数", "评论数"]);
    console.log(this.realBlogNum);
  }
  getNumList(): any {
    return this.$axios.get("/blog/numlist").then((res) => {
      if (res.data.error === -1) {
        console.log(res);
        res.data.data.forEach((ele: blognum, index: number) => {
          let blogNumInfo: Array<string | number> = [];
          if (ele.title.length > 9) {
            ele.title = ele.title.substring(0, 10) + "...";
          }
          blogNumInfo.push(ele.title);
          blogNumInfo.push(ele.seeNum);
          blogNumInfo.push(ele.goodNum);
          blogNumInfo.push(ele.commentLength);
          // this.$set(this.blogNum, index, blogNumInfo);
          this.blogNum.push(blogNumInfo);
        });
        this.controlLimit();
      }
    });
  }
}
</script>

<style lang="less" scoped>
#container {
  box-sizing: border-box;
  width: 100%;
  height: 600px;
  padding: 30px 15px;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
